import React from 'react'
import { Comment, List } from 'antd'

interface CommentDataInterface {
  datasource?:
    | {
        author: JSX.Element
        avatar: string
        content: JSX.Element
        datetime: JSX.Element
      }[]
    | undefined[]
}

const ChatRoomComment: React.FC<CommentDataInterface> = (
  props: CommentDataInterface
) => {
  const { datasource } = props

  return (
    <List
      className='comment-list'
      itemLayout='horizontal'
      dataSource={datasource}
      renderItem={(item) => (
        <li>
          <Comment
            author={item?.author}
            avatar={item?.avatar}
            content={item?.content}
            datetime={item?.datetime}
          />
        </li>
      )}
    />
  )
}

export default ChatRoomComment
